<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			/* [v-cloak] 属性选择器 选择所有具有v-cload属性的DOM元素 */
			[v-cloak]
			{
				display: none;
			}
			
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			{{msg}}
			<h1>二、基础指令</h1>
			
			<h2>1. v-cloak指令</h2>
			<p>防止网速慢，Vue.js还没生效，先将v-cload元素隐藏起来</p>
			<p>等vue.js加载完成 v-cloak的元素display:none 会被去掉</p>
			
			<h2>2. v-text指令</h2>
			<p>渲染普通文本</p>
			<div>{{msg}}</div>
			<div v-text="msg"></div>
			<div>xxxx,{{msg}}</div>
			<div v-text="msg">xxx,</div>
			
			<h2>3. v-html指令</h2>
			<p>渲染富文本</p>
			<div>{{msg2}}</div>
			<div v-text="msg2"></div>
			<div v-html="msg2"></div>
			
			<h2>4. v-bind指令</h2>
			<p>将模型中的数据渲染到DOM元素的属性中</p>
			<div title="msg">{{msg}}</div>
			<div v-bind:title="msg">{{msg}}</div>
			<div><a v-bind:href="link">百度</a></div>
			<div><img src="images/logo.png" /></div>
			<div><img v-bind:src="logo" /></div>
			<p>简写方式:</p>
			<div :title="msg">{{msg}}</div>
			<div><a :href="link">百度</a></div>
			<div><img :src="logo" /></div>
			
			
		</div>
		
		<script>
			
			function show1()
			{
				alert("show1");
			}
			

			// 页面全部加载完成后执行
			window.onload = function()
			{
				// js给元素添加事件方式2
				// 通过id找到DOM元素
				var btn2 = document.getElementById("btn2");
				console.log("按钮2:"+btn2);
				btn2.onclick = function()
				{
					console.log("show2");
					alert("show2");
				}
			}
			
			
		</script>

		<script>
			const vm = Vue.createApp({
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三",
						msg2: "<span style='color:red;'>Hello Vue!</span>",
						link: "https://www.baidu.com",
						logo: "images/logo.png",
					}
				},
				methods:{
					show3(){
						alert("show3"+this.msg);
					},
					show4(){
						alert("show4"+this.msg);
					},
					show5(){
						alert("show5"+this.msg);
					},
					show6(){
						alert("show6");
					}
					,
					show7(){
						alert("show7");
					}
					,
					show8(){
						alert("show8");
					},
					fooa(){
						alert("aaa");
					},
					foob(){
						alert("bbb");
					}
					
				}
			})
			vm.mount("#app");
			
			
			
		</script>
	</body>
</html>
